<template>
    <div class="xtx-city" ref="target">
        <div class="select" :class="{ active: isShow }" @click="toggle">
            <span class="value" v-if="defaultAddress">{{ defaultAddress }}</span>
            <span class="placeholder" v-else>请选择配送地址</span>
            <i class="iconfont icon-angle-down"></i>
        </div>
        <div class="option" v-if="isShow">
            <div v-if="!cityList.length" class="loading"></div>
            <span class="ellipsis" v-for="item in list" :key="item" @click="selectLocation(item)">{{ item.name }}</span>
        </div>
    </div>
</template>

<script>
export default {
    name: 'XtxCity',
}
</script>

<script setup>
import { ref, computed, reactive } from 'vue'
import { onClickOutside } from '@vueuse/core'
import axios from 'axios'

const isShow = ref(false)
const target = ref(null)
const cityList = ref([])
const address = reactive({
    provinceCode: '',
    provinceName: '',
    cityCode: '',
    cityName: '',
    countyCode: '',
    countyName: '',
    fullLocation: ''
})

defineProps(['defaultAddress'])

onClickOutside(target, () => {
    hide()
})

const show = () => {
    for (const key in address) {
        address[key] = ''
    }
    getCityList()
    isShow.value = true
}

const hide = () => {
    isShow.value = false
}

const toggle = () => {
    isShow.value ? hide() : show()
}

const getCityList = async () => {
    if (sessionStorage['cityList']) {
        cityList.value = JSON.parse(sessionStorage.getItem('cityList'))
        console.log('内存');
    } else {
        console.log('请求');
        try {
            const { data } = await axios.get('https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json')
            cityList.value = data
            sessionStorage.setItem('cityList', JSON.stringify(data))
        } catch (err) {
            console.log(err);
        }
    }
}

const list = computed(() => {
    let currList = cityList.value
    if (address.provinceCode) {
        currList = currList.find(x => x.code === address.provinceCode)?.areaList
    }

    if (address.cityCode) {
        currList = currList.find(x => x.code === address.cityCode)?.areaList
    }

    return currList
})

const emits = defineEmits(['changAddress'])

const selectLocation = ({ code, level, name }) => {
    if (level === 0) {
        address.provinceCode = code
        address.provinceName = name
    } else if (level === 1) {
        address.cityCode = code
        address.cityName = name
    } else if (level === 2) {
        address.countyCode = code
        address.countyName = name
        hide()
        address.fullLocation = `${address.provinceName} ${address.cityName} ${address.countyName}`
        emits('changAddress', address.fullLocation)
    }
}
</script>

<style scoped lang="less">
.xtx-city {
    display: inline-block;
    position: relative;
    z-index: 400;

    .select {
        border: 1px solid #e4e4e4;
        height: 30px;
        padding: 0 5px;
        line-height: 28px;
        cursor: pointer;

        &.active {
            background: #fff;
        }

        .placeholder {
            color: #999;
        }

        .value {
            color: #666;
            font-size: 12px;
        }

        i {
            font-size: 12px;
            margin-left: 5px;
        }
    }

    .option {
        width: 542px;
        border: 1px solid #e4e4e4;
        position: absolute;
        left: 0;
        top: 29px;
        background: #fff;
        min-height: 30px;
        line-height: 30px;
        display: flex;
        flex-wrap: wrap;
        padding: 10px;

        .loading {
            height: 290px;
            width: 100%;
            background: url(@/assets/images/loading.gif) no-repeat center;
        }

        >span {
            width: 130px;
            text-align: center;
            cursor: pointer;
            border-radius: 4px;
            padding: 0 3px;

            &:hover {
                background: #f5f5f5;
            }
        }
    }
}
</style>